import Taro, { Component } from '@tarojs/taro'
import { Swiper, SwiperItem, Image, View, Text,ScrollView } from '@tarojs/components'
import '../../assets/common.scss'
import CommonJs from '../../utils/common'
import Footer from '../index/footer'
import Shopfoot from '../index/Shopfoot'
import '../../assets/animate.min.scss'
import './mall.scss'
import './goodscat.scss'



export default class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
     flindex:0,
	   goodscat:[],
	   goodscat01:[],
	   pageheight:0,//获取高度
	   pageNumber:1,//页码数
     scrollPd:false,//是否可滑动
     hasNextPage:false,//是否有下一页
	}
  }
  config = {
    navigationBarTitleText: 'UC商城'
  }

  open(url,type){
    this.$preload({
      type:type
    })
    CommonJs.open(url);
  }


  componentWillMount () {
    this.getcat();

  }


  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }


  getcat(){
    var url='/commoditybean/papi/v2.0/categories/tree'
    var _this=this;
    CommonJs.ajaxRequest(url,'','GET',function(res){
       _this.setState({
        goodscat: res.data,
        goodscat01:res.data[0]
      })
    })
  } 
  choosefl(index){
    this.setState({
      flindex:index,
      goodscat01:this.state.goodscat[index]
    })
    if(!this.state.goodscat[index].children){
    	this.goodsxq(this.state.goodscat[index].id)
    }
  }
  goodsxq(id){
		this.open('/pages/xijia/gxc?byfrom=pingtai&categoryId='+id)
  }
  render () {
    const goodscat= this.state.goodscat;
    const goodscat01= this.state.goodscat01;
    return (
    <View className='mallPage'>
			<View className='goodscat' style={goodscat.length>0?'display:block':'display:none;'}>
				<View className='shoplist-fl'>

					{goodscat.length>0&&goodscat.map((item, index) => (
						<Text className={index==this.state.flindex?'fl-li fl-cur':'fl-li'} onClick={this.choosefl.bind(this,index)}>{item.name}</Text>
					))}
				</View>
				<View className='shop-list shop-listts' style="height:100%">
					<ScrollView className='mypage' scrollY='true' style='height:100%'>
					{goodscat01.children.length>0&&goodscat01.children.map((item, index) => (
						<View className='shop-list-cat'>
							<View className='shop-list-tit' onClick={this.goodsxq.bind(this,item.id)}>{item.name}</View>
							{item.children.length>0&&item.children.map((item1, index1) => (
							<Text className='cat-last-li'  onClick={this.goodsxq.bind(this,item1.id)}>{item1.name}</Text>
							))}
						</View>
					))}
					</ScrollView>
				</View>
			
			</View>
      </View>
    )
  }
}
